<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">

	<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

	<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

<script type="text/javascript">
	$(function(){

		$(".msg").hide();

		$(".time1").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
			autoclose: true,
			todayBtn: true,
			pickerPosition: "bottom-left"
		});

		$(".time2").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
			autoclose: true,
			todayBtn: true,
			pickerPosition: "top-left"
		});

		$("#reminderTime").click(function(){
			if(this.checked){
				$("#reminderTimeDiv").show("200");
			}else{
				$("#reminderTimeDiv").hide("200");
			}
		});

		$("#aname2").keydown(function (event) {

			if(event.keyCode==13){

				$.ajax({

					url : "workbench/contacts/getContactsListByName.do",
					data : {

						"aname2" : $.trim($("#aname2").val())

					},
					type : "get",
					dataType : "json",
					success : function (data) {

						var html = "";

						$.each(data,function (i,n) {

							html += '<tr>';
							html += '<td><input type="radio" name="xz" value="'+n.id+'"/></td>';
							html += '<td id="'+n.id+'">'+n.fullname+'</td>';
							html += '<td>'+n.email+'</td>';
							html += '<td>'+n.mphone+'</td>';
							html += '</tr>';

						})

						$("#contactsSearchBody").html(html);


					}

				})



				return false;

			}

		})

		$("#submitContactsBtn").click(function () {

			//取得选中市场活动的id
			var $xz = $("input[name=xz]:checked");
			var id = $xz.val();

			//取得选中市场活动的名字
			var name = $("#"+id).html();

			//将以上两项信息填写到 交易表单的市场活动源中
			$("#contactsId").val(id);
			$("#create-contacts").val(name);

			//将模态窗口关闭掉
			$("#searchContactsModal").modal("hide");

		})

		$("#clearBtn").click(function () {

			$("#visitForm")[0].reset();

		})

		//为保存按钮绑定事件，执行交易添加操作
		$("#saveBtn").click(function () {

			var owner = $.trim($("#create-owner").val());
			var subject = $.trim($("#create-subject").val());

			if(owner==""||subject==""){
				$(".msg").show();
				return false;
			}

			//发出传统请求，提交表单
			$("#visitForm").submit();

		})
	});
</script>
</head>
<body>

	<!-- 查找联系人 -->
	<div class="modal fade" id="searchContactsModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找联系人</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
							<div class="form-group has-feedback">
								<input type="text" id="aname2" class="form-control" style="width: 300px;" placeholder="请输入联系人名称">
								<span class="glyphicon glyphicon-search form-control-feedback"></span>
							</div>
						</form>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
						<tr style="color: #B3B3B3;">
							<td></td>
							<td>名称</td>
							<td>邮箱</td>
							<td>手机</td>
							<td></td>
						</tr>
						</thead>
						<tbody id="contactsSearchBody">

						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="submitContactsBtn">提交</button>
				</div>
			</div>
		</div>
	</div>
	
	<div style="position:  relative; left: 30px;">
		<h3>创建任务</h3>
	  	<div style="position: relative; top: -40px; left: 70%;">
			<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
			<a href="javascript:history.go(-1);" class="btn btn-default" type="button">取消</a>
			<button type="button" class="btn btn-primary" id="clearBtn">清空</button>
		</div>
		<hr style="position: relative; top: -40px;">
	</div>
	<form action="workbench/visit/save.do" id="visitForm" class="form-horizontal" role="form">
		<div class="form-group">
			<label for="create-owner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-owner" name="owner">
					<option></option>
					<c:forEach items="${uList}" var="u">
						<option value="${u.id}" ${user.id eq u.id ? "selected" : ""}>${u.name}</option>
					</c:forEach>
				</select>
				<span class="msg" style="color: red">必填</span>
			</div>
			<label for="create-subject" class="col-sm-2 control-label">主题<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-subject" name="subject">
				<span class="msg" style="color: red">必填</span>
			</div>
		</div>
		<div class="form-group">
			<label for="create-expiryDate" class="col-sm-2 control-label">到期日期</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control time1" id="create-expiryDate" name="expiryDate">
			</div>
			<label for="create-contacts" class="col-sm-2 control-label">联系人&nbsp;&nbsp;<a href="javascript:void(0);" data-toggle="modal" data-target="#searchContactsModal"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-contacts" name="contactsName" readonly>
				<input type="hidden" id="contactsId" name="contactsId"/>
			</div>
		</div>
	
		<div class="form-group">
			<label for="create-state" class="col-sm-2 control-label">状态</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-state" name="state">
					<option></option>
					<c:forEach items="${returnStateList}" var="rs">
						<option value="${rs.value}">${rs.text}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-priority" class="col-sm-2 control-label">优先级</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-priority" name="priority">
					<option></option>
					<c:forEach items="${returnPriorityList}" var="rp">
						<option value="${rp.value}">${rp.text}</option>
					</c:forEach>
				</select>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-description" class="col-sm-2 control-label">描述</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-description" name="description"></textarea>
			</div>
		</div>
		
		<div style="position: relative; left: 103px;">
			<span><b>提醒时间</b></span>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="checkbox" id="reminderTime" name="reminderTime">
		</div>
		
		<div id="reminderTimeDiv" style="width: 500px; height: 180px; background-color: #EEEEEE; position: relative; left: 185px; top: 20px; display: none;">
			<div class="form-group" style="position: relative; top: 10px;">
				<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
				<div class="col-sm-10" style="width: 300px;">
					<input type="text" class="form-control time2" id="create-startTime" name="startTime">
				</div>
			</div>
			
			<div class="form-group" style="position: relative; top: 15px;">
				<label for="create-repeatType" class="col-sm-2 control-label">重复类型</label>
				<div class="col-sm-10" style="width: 300px;">
					<select class="form-control" id="create-repeatType" name="repeatType">
					  <option></option>
					  <option>每天</option>
					  <option>每周</option>
					  <option>每月</option>
					  <option>每年</option>
					</select>
				</div>
			</div>
			
			<div class="form-group" style="position: relative; top: 20px;">
				<label for="create-noticeType" class="col-sm-2 control-label">通知类型</label>
				<div class="col-sm-10" style="width: 300px;">
					<select class="form-control" id="create-noticeType" name="noticeType">
					  <option></option>
					  <option>邮箱</option>
					  <option>弹窗</option>
					</select>
				</div>
			</div>
		</div>
	</form>
	
	<div style="height: 200px;"></div>
</body>
</html>